<!DOCTYPE html>
<html>
	<head>
		<title>GDIndex code builder</title>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link
			rel="stylesheet"
			href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
			integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
			crossorigin="anonymous"
		/>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
	</head>
	<body>
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-md-8">
					<div class="jumbotron mb-0">
						<h1 class="display-4">GDIndex Code Builder</h1>
						<p class="lead">
							This is a simple website to help you get started
							with
							<a
								href="https://github.com/maple3142/GDIndex"
								target="_blank"
								>GDIndex</a
							>. <br /><span style="font-size: 14px"
								>The source code of this website can be found
								<a
									href="https://repl.it/@maple3142/gdindex-code-builder#index.js"
									target="_blank"
									>here</a
								>, so no need to worry about whether it is
								trustworthy.</span
							>
						</p>
					</div>
				</div>
			</div>
			<div class="row justify-content-center">
				<div class="col-md-8">
					<div class="card">
						<div class="card-body">
							<h5 class="card-title">
								1. Get Authorization Code
							</h5>
							<p class="card-text">
								Click the following link and authorize, then
								copy the code you get.
							</p>
							<a
								class="btn btn-primary"
								target="_blank"
								href="https://accounts.google.com/o/oauth2/auth?client_id=202264815644.apps.googleusercontent.com&redirect_uri=urn%3Aietf%3Awg%3Aoauth%3A2.0%3Aoob&response_type=code&access_type=offline&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fdrive&approval_prompt=auto"
								>Click me</a
							>
						</div>
					</div>
				</div>
			</div>
			<div class="row justify-content-center">
				<div class="col-md-8">
					<div class="card">
						<div class="card-body">
							<h5 class="card-title">2. Fill the form</h5>
							<form action="/getcode" method="POST" id="form">
								<div class="form-group">
									<label for="auth_code"
										>Authorization Code</label
									>
									<input
										type="text"
										class="form-control"
										id="auth_code"
										name="auth_code"
									/>
								</div>
								<div class="form-group">
									<label for="default_root_id"
										>Default Root ID</label
									>
									<input
										type="text"
										class="form-control"
										id="default_root_id"
										name="default_root_id"
										value="root"
									/>
									<small class="form-text text-muted"
										>If you don't know what is this, just
										leave it alone.</small
									>
								</div>
								<div class="form-group form-check">
									<input
										type="checkbox"
										class="form-check-input"
										name="auth"
										id="auth"
									/>
									<label class="form-check-label" for="auth"
										>Enable authentication</label
									>
								</div>
								<div class="form-group">
									<label for="user"
										>Username (require authentication to
										work)</label
									>
									<input
										type="text"
										class="form-control"
										id="user"
										name="user"
									/>
								</div>
								<div class="form-group">
									<label for="pass"
										>Password (require authentication to
										work)</label
									>
									<input
										type="password"
										class="form-control"
										id="pass"
										name="pass"
									/>
								</div>
								<div class="form-group form-check">
									<input
										type="checkbox"
										class="form-check-input"
										name="upload"
										id="upload"
									/>
									<label class="form-check-label" for="upload"
										>Enable file uploading</label
									>
								</div>
								<button type="submit" class="btn btn-primary">
									Get Code
								</button>
							</form>
						</div>
					</div>
				</div>
			</div>
			<div
				class="row justify-content-center"
				id="result"
				style="display: none"
			>
				<div class="col-md-8">
					<div class="card" id="success" style="display: none">
						<div class="card-body">
							<h5 class="card-title">3. Finished</h5>
							<p class="card-text">
								Copy the following code and go to
								<a
									href="https://workers.cloudflare.com/"
									target="_blank"
									>CloudFlare Workers</a
								>
								to paste the code.
							</p>
							<button
								class="btn btn-primary"
								data-clipboard-target="#code"
							>
								Copy the code to clipboard
							</button>
							<textarea
								class="form-control mt-3"
								id="code"
								rows="100"
							></textarea>
						</div>
					</div>
					<div class="card" id="failed" style="display: none">
						<div class="card-body">
							<h5 class="card-title">3. Failed</h5>
							<p class="card-text" id="failed_message"></p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script>
			new ClipboardJS('.btn')
			form.onsubmit = e => {
				e.preventDefault()
				fetch(form.action, {
					method: form.method,
					body: new URLSearchParams(new FormData(form))
				}).then(r => {
					if (!r.ok) {
						result.style.display = 'flex'
						failed.style.display = 'flex'
						success.style.display = 'none'
						return r.text().then(t => {
							failed_message.textContent = t
						})
					}
					return r.text().then(t => {
						result.style.display = 'flex'
						success.style.display = 'flex'
						failed.style.display = 'none'
						code.textContent = t
					})
				})
			}
		</script>
	</body>
</html>
